import React,{Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter as Router,NavLink,useRoutes} from 'react-router-dom';
import {activeProps} from './utils';
import routesConfig from './routesConfig';
const root = ReactDOM.createRoot(document.getElementById('root'));
//动态加载组件 import作为方法执行，可以动态导入一个组件
const LazyPost = React.lazy(()=>import('./components/Post'));
function App(){
	//定义一个路由配置数组的状态，默认值是当前的路由配置数组
	const [routes,setRoutes] = React.useState(routesConfig);
	//当点击按钮的时候创建新的路由配置数组并进行更新
	const addRoute = ()=>{
		//在原来的数组基础上，添加一个新的对象
		setRoutes([
			...routes,
			{
				path:'/post',
				element:(
					<Suspense fallback={<div>loading....</div>}>
						<LazyPost/>
					</Suspense>
				)}
		]);
	}
	return (
		<div>
			{useRoutes(routes)}
			<button onClick={addRoute}>添加路由</button>
		</div>
	)
}
//当浏览器中的URL地址中的路径和某个Route中的path匹配的时候，就会渲染对应的element
root.render(
	<Router>
		<ul>
			<li><NavLink to='/' {...activeProps}>首页</NavLink></li>
			<li><NavLink to='/user'  {...activeProps}>用户管理</NavLink></li>
			<li><NavLink to='/profile'  {...activeProps}>个人中心</NavLink></li>
		</ul>
		<App/>
	</Router>
);